<style lang="scss">
#drugMetabolism{
    .card{
        height: auto;
    }
    .sign-button-defalut{
        color:#8cc5ff;
        cursor: not-allowed;
        background:#ecf5ff;
        border:1px solid #d9ecff;
    }
    .img-dialog{
        text-align:center;
        img{
            display: inline-block;
            width:600px;
            height:600px;
        }
    }
}
</style>
<template>
    <div id="drugMetabolism" class="content-mask" v-loading="loading">
        <div class="card">
            <el-row type="flex">
                <el-col :span="14">
                    <p class="l-title">
                        <img src="/static/image/xgjy.png" />
                        <span>相关基因</span>
                    </p>
                    <div class="block" v-if="geneList.length>0">
                        <p class="block-title">药物基因组学</p>
                        <div class="normal-button-content">
                            <span @click="goGene(item.geneId)" v-for="(item,index) in geneList" :key="index">{{item.entrezSymbol}}</span>
                        </div>
                    </div>
                    <div class="block" v-else>
                        暂无相关基因
                    </div>
                </el-col>
                <el-col :span="10">
                    <p class="l-title">
                        <img src="/static/image/xhtl.png" />
                        <span>信号通路</span>
                    </p>
                    <div class="block">
                        <div class="primary-button-content">
                            <span @click="showImage" v-if="drug.drugDl == 1" class="sign-button">药代动力学信号通路</span>
                            <span v-else class="sign-button-defalut">药代动力学信号通路</span>
                            <p>{{drug.chName}}运输和代谢的信号通路。</p>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="card">
            <p class="l-title">
                <img src="/static/image/bywd.png" />
                <span>变异位点</span>
            </p>
            <div class="block">
                <p class="m-title">
                    <img src="/static/image/bx.png" />
                    <span>药物基因组学</span>
                </p>
                <div class="block" v-if="genVariantModels.length>0">
                    <div class="block-item" v-for="(item,index) in genVariantModels" :key="index">
                        <p class="primary-button-content">
                            <!-- <span>{{item.entrezSymbol}}</span> -->
                            <!-- <span :class="item.entrezSymbol==activeEntrezSymbol ? 'isActive' :''" @click="getPharmEvidentList(item.geneid,item.entrezSymbol)">{{item.entrezSymbol}}</span> -->
                            <span @click="getPharmEvidentList(item.geneid,item.entrezSymbol)">{{item.entrezSymbol}}</span>
                        </p>
                        <p class="normal-button-content">
                            <span @click="goChemVariation(it.variant)" v-for="(it,idx) in item.pharmEvidentList" :key="idx">{{it.variant}}</span>
                        </p>
                    </div>
                </div>
                <div class="block" v-else>
                    暂无变异位点
                </div>
            </div>
        </div>
        <el-dialog title="药代动力学信号通路" :visible.sync="dialogVisible" width="700px" class="img-dialog">
            <img  v-if="dialogVisible && drug.drugDl == 1" :src="imgUrl+drug.drugId+'_YD.png'" />
        </el-dialog>
        <el-dialog :visible.sync="isLczjShow" width="70%">
            <div class="card">
                <p class="l-title">
                    <img src="/static/image/lczj.png" />
                    <span>临床证据</span>
                </p>
                <div class="block">
                    <el-table v-loading="tableLoading" :data="pharmEvidentList" border height="500">
                        <el-table-column align="center" label="变异名称" width="120" prop="variant"></el-table-column>
                        <el-table-column align="center" label="基因名称" width="80" prop="entrezSymbol"></el-table-column>
                        <el-table-column align="center" label="染色体" width="80" prop="chromosome"></el-table-column>
                        <el-table-column align="center" label="等位基因" width="80" prop="alleles"></el-table-column>
                        <el-table-column align="center" label="表型分类" width="80" prop="phenotypecategory"></el-table-column>
                        <el-table-column align="center" label="临床意义" prop="notes"></el-table-column>
                        <el-table-column align="center" label="等位基因解读" prop="sentence"></el-table-column>
                        <el-table-column align="center" label="PMID" width="100">
                            <template slot-scope="scope">
                                <a target="_blank" :href="getUrl(scope.row.pmid)">{{scope.row.pmid}}</a>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- <div class="block" v-else>
                    无
                </div> -->
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { imgUrl } from '@/common/js/Base.js';
import {medicine} from 'api/index.js';
export default {
    name: 'drugMetabolism',
    data(){
        return{
            drugId:"",
            loading:false,
            isLczjShow:false,
            imgUrl:imgUrl,
            tableLoading:false,
            dialogVisible:false,
            pharmObject:{},
            drug:{},     //药物基本信息
            geneList:[], //基因列表
            genVariantModels:[], //变异位点
            pharmEvidentList:[], //临床证据 
            pharmEvidentObject:{},//证据详情
            activeEntrezSymbol:""//当前激活临床证据的靶向基因
        }
    },
    methods:{
        getDrugEMetab(){
            let obj={
                id:this.drugId
            }
            this.loading = true;
            medicine.getPharmByDrugId(obj).then((data)=>{
                if(data.status == 200){
                   if(data.data){
                       this.pharmObject = data.data;
                       this.getDetails();
                   }
                }else{
                    this.$message.error(data.msg);
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
                this.$message.error("获取药物代谢失败");
            });
        },
        getDetails(){
            //药物基本信息
            if(this.pharmObject.drug){
                this.drug = this.pharmObject.drug;
            }
            this.$emit("drugName",this.drug.chName+"("+this.drug.drugName+")");
            //相关基因
            if(this.pharmObject.geneList && this.pharmObject.geneList.length>0){
                this.geneList = this.pharmObject.geneList;
            }else{
                this.geneList = [];
            }
            //变异位点
            if(this.pharmObject.genVariantModels && this.pharmObject.genVariantModels.length>0){
                this.genVariantModels = this.pharmObject.genVariantModels;
                // this.activeEntrezSymbol = this.genVariantModels[0].entrezSymbol;
                // this.getPharmEvidentList(this.genVariantModels[0].geneid,this.genVariantModels[0].entrezSymbol);
            }else{
                this.genVariantModels = [];
            }
            // //临床证据
            // if(this.pharmObject.pharmEvidentList && this.pharmObject.pharmEvidentList.length>0){
            //     this.pharmEvidentList = this.pharmObject.pharmEvidentList;
            // }else{
            //     this.pharmEvidentList = [];
            // }
        },
        //获取药物基因组学临床证据
        getPharmEvidentList(id,entrezSymbol){
            this.isLczjShow = true;
            let obj = {
                geneid : id,
                drugid : this.drug.drugId
            };
            this.tableLoading = true;
            medicine.getPharmEvidentsByGeneId(obj).then((data)=>{
                if(data.status == 200){
                   this.pharmEvidentList = data.data;
                //    this.activeEntrezSymbol = entrezSymbol;
                }else{
                    this.$message.error(data.msg);
                }
                this.tableLoading = false;
            }).catch(error => {
                this.tableLoading = false;
                this.$message.error("获取临床证据失败");
            });
        },
        //跳转至基因页面
        goGene(id){
            this.$router.push("/gene?geneId="+id);
        },
        //跳转至化学变异页面
        goChemVariation(id){
            this.$router.push("/chemVariation?chemId="+id);
        },
        getUrl(pmid){
            return 'https://www.ncbi.nlm.nih.gov/pubmed/'+pmid
        },
        //药代动力学信号通路
        showImage(){
            this.dialogVisible = true;
        }
    },
    mounted() {
        this.drugId = this.$store.state.searchId ? this.$store.state.searchId: '';
        this.getDrugEMetab();
    },
    watch:{
        "$store.state.searchId":function(){
            if(this.drugId != this.$store.state.searchId){
                this.drugId = this.$store.state.searchId;
                this.getDrugEMetab();
            }
        }
    },
}
</script>
